<template>
  <div class="level">
    <div v-for="i in 5" :key="i">
      <img v-if="i <= num" :src="qnPath(icon)">
      <img v-else :src="qnPath(icon2)" alt="">
    </div>
  </div>
</template>
<script>
export default {
  name: 'Level', // 商家信用分等级
  props: {
    credit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      icon: 'icon/icon-level1.png',
      icon2: 'icon/icon-level11.png',
      num: 1
    };
  },
  created() {
    const n = this.credit;
    var x = 0;
    if (n <= 10) {
      x = 1;
    } else if (n > 10 && n <= 40) {
      x = 2;
    } else if (n > 40 && n <= 90) {
      x = 3;
    } else if (n > 90 && n <= 150) {
      x = 4;
    } else if (n > 150 && n <= 250) {
      x = 5;
    } else if (n > 250 && n <= 500) {
      x = 6;
    } else if (n > 500 && n <= 1000) {
      x = 7;
    } else if (n > 1000 && n <= 2000) {
      x = 8;
    } else if (n > 2000 && n <= 5000) {
      x = 9;
    } else if (n > 5000 && n <= 10000) {
      x = 10;
    } else if (n > 10000 && n <= 20000) {
      x = 11;
    } else if (n > 20000 && n <= 50000) {
      x = 12;
    } else if (n > 50000 && n <= 100000) {
      x = 13;
    } else if (n > 50000 && n <= 100000) {
      x = 13;
    } else if (n > 100000 && n <= 200000) {
      x = 14;
    } else if (n > 200000 && n <= 500000) {
      x = 15;
    } else if (n > 500000 && n <= 1000000) {
      x = 16;
    } else if (n > 1000000 && n <= 2000000) {
      x = 17;
    } else if (n > 2000000 && n <= 5000000) {
      x = 18;
    } else if (n > 5000000 && n <= 10000000) {
      x = 19;
    } else if (n > 10000000) {
      x = 20;
    }
    let type = 1;
    if (x % 5) {
      this.num = x % 5;
      type = Math.floor(x / 5) < 1 ? 1 : Math.floor(x / 5) + 1;
    } else { // 5的倍数
      this.num = 5;
      type = Math.floor(x / 5);
    }
    this.icon = `icon/icon-level${type}.png`;
    this.icon2 = `icon/icon-level${type}1.png`;
  }
};
</script>
<style lang="scss" scoped>
.level{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	img{
    margin-right: 4px;
  }
}
</style>
